<template>
  <div class="samApplay">
    <div class="title">
      <navTitle :navArr="navArr"></navTitle>
    </div>
    <div class="samBox">
      <div class="info">
        <h2>请填写您的收货信息</h2>
        <el-input class="inp" v-model="name" placeholder="收货人"></el-input>
        <el-input class="inp" v-model="phone" type="number" placeholder="收货人手机号"></el-input>
      </div>
      <div class="address">
        <h2>收货地址</h2>
        <div class="city">
          <el-input class="inp-s" v-model="province" placeholder="省"></el-input>
          <el-input class="inp-s" v-model="city" placeholder="市"></el-input>
          <el-input class="inp-s" v-model="area" placeholder="区"></el-input>
        </div>
        <div class="street">
          <el-input class="inp" v-model="address" placeholder="详细地址"></el-input>
        </div>
      </div>
      <!-- <div class="choose">
        <h2>请选择申请的样品</h2>
        <div class="packageWarp">
          <myPackage :isFar="isFar()" @setIdChange="setIdChange"></myPackage>
        </div>
      </div> -->
      <div class="total">
        总价：
        <span>{{ packages.samPriceTotal }}元</span>
      </div>
      <div class="footer">
        <b class="button-n" @click="payTest">确认支付</b>
      </div>
    </div>
    <NoMoney v-if="errorType==1" :money="leftMoney" @closeNoMoney="closeNoMoney"></NoMoney>
  </div>
</template>
<script type="text/ecmascript-6">
import navTitle from '../../base/navTitle/index'
import NoMoney from '../../base/alert/noMoney'
import MyPackage from '../../base/myPackage/index'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'samApplay',
  components: {
    navTitle,
    NoMoney,
    MyPackage
  },
  data () {
    return {
      navArr: ['样品申请'],
      name: '',
      phone: '',
      province: '',
      city: '',
      area: '',
      address: '',
      errorType: -1,
      leftMoney: 0,
      setId: '',
      money: 0
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'sellerInfo',
      'packages'
    ])
  },
  methods: {
    payTest () {
      if (this.name === '') {
        this.$message({
          message: '请输入收货人姓名',
          type: 'warning'
        })
      } else if (this.phone === '') {
        this.$message({
          message: '请输入收货人手机',
          type: 'warning'
        })
      } else if (this.province === '') {
        this.$message({
          message: '请输入省',
          type: 'warning'
        })
      } else if (this.city === '') {
        this.$message({
          message: '请输入市',
          type: 'warning'
        })
      } else if (this.address === '') {
        this.$message({
          message: '请输入详细地址',
          type: 'warning'
        })
      } else if (this.packages.samPriceTotal - this.sellerInfo.balance > 0) {
        this.$message({
          message: '余额不足，请充值',
          type: 'warning'
        })
        this.errorType = 1
      } else {
        this.creatOrder()
      }
    },
    creatOrder () {
      let ordersArr = [{
        orderNo: '999999999',
        receiveName: this.name,
        address: this.province + ' ' + this.city + ' ' + this.area + ' ' + this.address,
        setId: this.packages.setId,
        telephone: this.phone
      }]
      this.$ajax.post('/file/task/upload/uploadHand', {
        sellerAccountId: this.userInfo.sellerAccountId,
        shopType: '5',
        logisticsType: '1',
        orders: ordersArr
      }).then((data) => {
        if (data.data.code === '200') {
          let res = data.data.data
          if (res.code === -1) {
            this.$alert('"' + res.productName + '"' + res.msg + '请重新选择商品', '提示', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          } else {
            if (res.realNum === res.totalNum) {
              this.sureToPayPost(res.orderId)
            } else {
              this.$message({
                message: '订单生成失败, 请检查填写的信息是否有误',
                type: 'error'
              })
            }
          }
        } else {
          this.$message({
            message: data.data.message,
            type: 'error'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    sureToPayPost (orderId) {
      this.$confirm('确认支付该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$ajax.post('/api/order/operate/pay', {
          orderId: orderId,
          isApply: '1'
        }).then((data) => {
          if (data.data.code === '200') {
            if (data.data.data.code === 0) {
              this.refreshMoney()
              this.$alert('支付成功，我们会优先为您寄出，请耐心等待', '支付成功', {
                confirmButtonText: '确定',
                type: 'success',
                callback: action => {
                  this.$router.push({ name: 'giftStore' })
                }
              })
            } else if (data.data.data.code === -1) {
              this.$alert('"' + data.data.data.productName + '"' + data.data.data.msg + '请撤销订单后选择其他商品重新下单', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.push({ name: 'orderManger' })
                }
              })
            } else {
              this.$message({
                message: data.data.data.msg,
                type: 'error'
              })
            }
          } else {
            this.$message({
              message: data.data.message,
              type: 'error'
            })
          }
        }).catch((err) => {
          console.error(err)
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        })
      })
    },
    closeNoMoney () { // 关闭余额不足弹框
      this.errorType = -1
      this.refreshMoney()
    },
    refreshMoney () {
      this.$ajax.post('/api/seller/account/getSellerInfoBySellerAccountId', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          this.setSellerInfo(data.data.data)
        } else {
          this.$message({
            message: data.data.message,
            type: 'error'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    isFar () {
      let bol = false
      let arr = ['新疆', '西藏', '内蒙古', '甘肃', '青海', '宁夏', '海南']
      for (let i = 0; i < arr.length; i++) {
        if (this.province.indexOf(arr[i]) > -1) {
          bol = true
        }
      }
      if (bol) {
        return {
          farNum: 1,
          normalNum: 0
        }
      } else {
        return {
          farNum: 0,
          normalNum: 1
        }
      }
    },
    setIdChange (arr) { // arr [ setId, money ]
      this.setId = arr[0]
      this.money = arr[1]
    },
    ...mapActions([
      'setSellerInfo'
    ])
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.samApplay
  margin-bottom 50px
  .title
    margin-bottom 20px
  .samBox
    border 1px solid #dddddd
    padding 40px 30px
    text-align center
    .inp
      width 610px
      margin-bottom 10px
    .inp-s
      width 200px
      margin-bottom 10px
    .info
      display flex
      flex-direction column
      align-items center
      h2
        font-size 20px
        font-weight bold
        margin-bottom 20px
    .address
      margin-top 20px
      h2
        font-size 20px
        font-weight bold
        margin-bottom 20px
    .choose
      margin-top 20px
      h2
        font-size 20px
        font-weight bold
        margin-bottom 20px
      .packageWarp
        width 600px
        padding 50px 20px
        border 1px solid #999999
        margin 0 auto
    .total
      font-size 20px
      font-weight bold
      margin-top 20px
      background #dddddd
      line-height 50px
      span
        color #ff3341
        font-weight bold
    .footer
      margin-top 40px
</style>
